<template>
  <div class="map-layout">
    <div class="map-layout-menu">
      <ButtonGroup size="small">
        <Button size="small" type="primary" v-on:click="addHandler">新建</Button>
        <Button size="small" type="primary" v-on:click="renameHandler">更名</Button>
        <Button size="small" type="error" v-on:click="deleteMap">删除</Button>
      </ButtonGroup>
      <ButtonGroup class="cm-margin-top-5" size="small">
        <Button size="small" type="primary">移动</Button>
        <Button size="small" type="primary">拷贝</Button>
      </ButtonGroup>
    </div>
    <div class="map-layout-folder" v-if="mapData">
      <map-folder-item v-for="(map, index) in mapData"
        v-bind:key="map.name + index"
        v-bind:map="map"
        v-bind:selected-id="mapSelected"
        v-on:on-select="selectHandler"></map-folder-item>
    </div>
    
    <Modal
      v-model="addModal"
      title="添加地图"
      v-bind:loading="true"
      v-on:on-ok="addMap">
      <Input class="cm-margin-bottom-10" v-model="addInput" placeholder="请输入新地图的名称" />
      <Radio-group v-model="isRootAdd" vertical>
        <Radio v-bind:label="1">在根节点下添加</Radio>
        <Radio v-bind:label="0" v-bind:disabled="!isMapSelected">在选中节点【{{ mapSelectedName }}】下添加</Radio>
      </Radio-group>
    </Modal>
    
    <Modal
      v-model="renameModal"
      title="地图更名"
      v-bind:loading="true"
      v-on:on-ok="renameMap">
        <div class="cm-margin-bottom-5">修改【{{ mapSelectedName }}】地图的名称</div>
        <Input v-model="renameInput" placeholder="请输入新名称" />
    </Modal>
  </div>
</template>

<script src="./mapFolder.js"></script>

<style lang="stylus">
@import './mapFolder.styl'
</style>
